<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: xiangyinjie
  Date: 2021/5/14
  Time: 18:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    //获取项目的根路径
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="<%=basePath%>static/layui-v2.6.5/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>static/swee/sweetalert.css">
    <script type="text/javascript" src="<%=basePath%>static/swee/sweetalert-dev.js"></script>
</head>
<style type="text/css">
    ul li {
        display: inline;
    }

    img {
        width: 25px;
        height: 25px;
    }

    #cancel {
        float: right;
        font-size: 24px;
        width: 25px;
        height: 25px;
        margin-right: 412px;
    }

    .login {
        width: 560px;
        height: 470px;
        border: 0px #009f95 solid;
        margin: auto;
        margin-top: 100px;
        padding-right: 160px;
        background-color: #009f95;
    }

    #login p, .login p {
        font-size: 18px;
        margin-right: auto;
        float: right;
        margin-top: 30px;
    }

    .anniu li {
        margin-left: 10px;
    }

    .biaoti {
        margin-top: 6px;
        margin-left: 240px;
    }

    .queding {
        margin-left: 930px;
        margin-top: -65px;
    }

    .cancel {
        float: right;
        font-size: 24px;
        width: 25px;
        height: 25px;
        margin-right: 12px;
        padding-bottom: 50px;
    }

    #modification {
        display: none;
    }

    #modification {
        position: relative;
        margin-top: -400px;
        z-index: 20;
    }

    .layui-inline {
        margin-left: 40%;
    }

    input {
        margin-top: 10px;
        border: none;
        border-bottom: 1.5px solid #009f95;
        margin-left: 10px;
        height: 30px;
    }

    #money {
        width: 300px;
        height: 150px;
        display: none;
        border: 1px sandybrown solid;
        position: relative;
        z-index: 30;
        margin: auto;
        margin-top: -330px;
        background-color: #FFFFFF;
    }

</style>
<body>
<form method="post" action="<%=basePath%>front/pagecard">
    <div class="layui-inline">
        <div class="layui-input-inline ">
            <input type="text" name="id" class="layui-input">
        </div>
    </div>
    <button type="submit" class="layui-btn" style="background-color:#009f95;">搜索</button>
</form>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>补卡</legend>
</fieldset>
<table class="layui-table" lay-skin="line">
    <colgroup>
        <col width="150">
        <col width="150">
        <col width="200">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th>编号</th>
        <th>身份证号码</th>
        <th>姓名</th>
        <th>性别</th>
        <th>电话号码</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${page.list}" var="frontdeskCard">
        <tr>
            <td>${frontdeskCard.id}</td>
            <td>${frontdeskCard.idCard}</td>
            <td>${frontdeskCard.name}</td>
            <td>${frontdeskCard.sex}</td>
            <td>${frontdeskCard.phone}</td>
            <td>${frontdeskCard.age}</td>
            <td><a href="#" class="replacement">
                <button type="button" class="layui-btn layui-btn-xs layui-btn-normal"
                        style="background-color:#009f95;width: 40px;height: 25px;">补办
                </button>
            </a>
                <a href="#" class="recharge">
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-normal"
                            style="background-color:#009f95;width: 40px;height: 25px;">充值
                    </button>
                </a>
            </td>

        </tr>
    </c:forEach>
    </tbody>
</table>
<span style="margin-left: 40%"></span>
${page.pageNum}/${page.lastPage}
<a href="<%=basePath%>front/pagecard?curr=${page.firstPage}&id=${id}">首页</a>
<a href="<%=basePath%>front/pagecard?curr=${page.prePage}&id=${id}">上一页</a>
<a href="<%=basePath%>front/pagecard?curr=${page.nextPage}&id=${id}">下一页</a>
<a href="<%=basePath%>front/pagecard?curr=${page.lastPage}&id=${id}">末页</a>

<div id="money" style="height: 200px">
    <div class="cancel">
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">×</i></button>
    </div>
    <br>
    <br>
    充值金额：<input type="text" name="amount" class="amount">
    <input type="hidden" name="cunid" class="amount">
</div>
<div id="modification">
    <div id="cancel">
        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">×</i></button>
    </div>
    <div class="login">

        <h1 class="biaoti">华子医院补卡登记</h1>
        <p>
            <input type="text" name="ids" style="width:270px; height:27px;display: none">
        </p>
        <p>
            请输入身份证号码：
            <input type="text" name="idCards" style="width:270px; height:27px;readonly:readonly;">
        </p>
        <p>
            请输入姓名：
            <input type="text" name="names" style="width:270px; height:27px;readonly:readonly;">
        </p>
        <p>
            请输入密码：
            <input type="password" name="pwds" style="width:270px; height:27px;">
        </p>
        <p>
            请输入性别：
            <input type="text" name="sexs" style="width:270px; height:27px;readonly:readonly;">
        </p>
        <p>
            年龄：
            <input type="text" name="ages" style="width:270px; height:27px;readonly:readonly;">
        </p>
        <p>
            电话号码：
            <input type="text" name="phones" style="width:270px; height:27px;readonly:readonly;">
        </p>
        <p>
            <input type="text" name="moneys" style="width:270px; height:27px;display: none">
        </p>
    </div>
    <div class="queding">
        <button type="button" class="layui-btn layui-btn-primary layui-btn-radius" style="background-color: #ffffff"
                onclick="cardreissue()">提交
        </button>
        <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius" style="background-color: #ffffff">重置
        </button>

    </div>
</div>
<script src="<%=basePath%>static/layui-v2.6.5/layui/layui.js" charset="utf-8"></script>
<script src="<%=basePath%>static/jquery/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(function () {
        $("#cancel").click(function () {
            $("#modification").hide();
        })
        $(".cancel").click(function () {
            $("#money").hide();
        })
        $(".recharge").click(function () {
            var $id = $(this).parent().parent().children("td:eq(0)").text();
            $("input[name='cunid']").val($id);
            $("#money").show();
        })
        $("#dianji").click(function () {
            var $amount = $("input[name='amount']").val();
            var $cunid = $("input[name='cunid']").val();
            $.ajax({
                async: false,
                url: "<%=basePath%>Frontd/recharging",
                type: "post",
                data: {
                    id: $cunid,
                    mount: $amount,
                },
                dataType: "JSON",
                success: function (data) {
                    if (data) {
                        $("#login :input").val("");
                        swal("充值成功！", "", "success");
                        $("#money").hide();

                    } else {
                        swal({
                            title: "<img src='<%=basePath%>img/frontdesk/err.png'><small>充值失败！</small>!",
                            html: true
                        });
                    }

                }
            })
        })
        $(".replacement").click(function () {
            $("#modification").show();
            var $idCard = $(this).parent().parent().children("td:eq(1)").text();
            $.ajax({
                async: false,
                url: "<%=basePath%>front/iduser",
                type: "post",
                data: {
                    idCard: $idCard,
                },
                dataType: "JSON",
                success: function (data) {
                    $("input[name='ids']").val(data.id);
                    $("input[name='idCards']").val(data.idCard);
                    $("input[name='names']").val(data.name);
                    $("input[name='sexs']").val(data.sex);
                    $("input[name='ages']").val(data.age);
                    $("input[name='phones']").val(data.phone);
                    $("input[name='moneys']").val(data.money);
                }
            })
        })
    })

    function cardreissue() {
        var $ids = $("input[name='ids']").val();
        var $idCards = $("input[name='idCards']").val();
        var $names = $("input[name='names']").val();
        var $pwds = $("input[name='pwds']").val();
        var $sexs = $("input[name='sexs']").val();
        var $ages = $("input[name='ages']").val();
        var $phones = $("input[name='phones']").val();
        var $moneys = $("input[name='moneys']").val();
        if ($pwds.toString().trim().length != 6) {
            swal({
                title: "<img src='<%=basePath%>img/frontdesk/err.png'><small>密码长度为6位！</small>!",
                html: true
            });
            return;

        }
        $.ajax({
            url: "<%=basePath%>front/reissue",
            type: "post",
            data: {
                ids: $ids,
                idCard: $idCards,
                name: $names,
                pwd: $pwds,
                sex: $sexs,
                age: $ages,
                phone: $phones,
                moneys: $moneys
            },
            dataType: "JSON",
            success: function (data) {
                if (data) {
                    swal({
                            title: "补卡成功！",
                            type: "success",
                            html: true
                        },
                        function () {
                            $(":input").val("");
                            window.location.reload();
                        });
                } else {
                    swal({
                        title: "<img src='<%=basePath%>img/frontdesk/err.png'><small>补卡失败！</small>!",
                        html: true
                    });
                }
            }
        })
    }
</script>
</body>
</html>
